<template>
  <view class="chat-list" id="chat-list">
    <!-- :style="{ height: height + 'px' }" -->
    <scroll-view
      scroll-y
      style="height: 74vh"
      :scroll-into-view="lastBottomId"
      :scroll-anchoring="true"
      class="scroll-view"
    >
      <view class="list" :style="{ paddingLeft: share ? '112rpx' : '24rpx' }" id="list">
        <template>
          <u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
            <view :id="item.id" v-for="(item, index) in chatList" style="position: relative">
              <u-checkbox
                v-if="share"
                class="checkbocCl"
                :key="item.id + 12"
                shape="circle"
                :checked="checkedBox"
                size="19"
                :name="item.id"
              ></u-checkbox>
              <chat-item :item="item" systemIcon="" :sysRole="sysRole" :index="index"></chat-item>
            </view>
          </u-checkbox-group>
        </template>
      </view>
      <view id="last-msg-item"></view>
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import chatItem from './chat-item'
export default {
  options: {
    styleIsolation: 'shared',
  },
  components: {
    chatItem,
  },
  data() {
    return {
      height: 0,
      globalConfig: this.globalConfig,
      lastBottomId: '',
      checkboxValue1: [],
      list: [],
      changeList: [],
      checkedBox: false,
    }
  },
  computed: {
    ...mapState({
      chatList: (state) => {
        console.log('state.chat.chatListAI------', state.chatAI.chatListAI)
        return state.chatAI.chatListAI
      },
      share: (state) => {
        return state.chatAI.share
      },
      sysRole: (state) => {
        return state.chatAI.systemRole
      },
      checkoutAll() {
        return this.$store.state.share.checkoutAll
      },
    }),
  },
  watch: {
    chatList: {
      handler() {
        const chat = this.chatList[this.chatList.length - 1]
        if (chat) {
          uni.$u.throttle(() => {
            this.$nextTick(() => {
              this.lastBottomId = 'last-msg-item'
              this.$nextTick(() => {
                this.lastBottomId = ''
              })
            })
          }, 500)
        }
      },
      immediate: true,
    },
    checkoutAll: {
      handler(val) {
        if (val) {
          this.checkedBox = val
          return
        }
        // 判断如果changeList中还有值, 就不false
        if (this.changeList.length > 0) {
          this.checkedBox = false
        } else {
          this.checkedBox = val
        }
      },
    },
  },
  mounted() {
    this.$nextTick(async () => {
      this.height = await this.getDomHeight('#chat-list')
    })
  },
  methods: {
    getDomHeight(str) {
      const query = uni.createSelectorQuery().in(this)
      return new Promise((resolve) => {
        query
          .select(str)
          .boundingClientRect((data) => {
            resolve(data.height)
          })
          .exec()
      })
    },
    checkboxChange(e) {
      this.changeList = e
      this.$store.commit('SETSHARELIST', e)
      // 如果和chatList的长度相同, 设置全选为true
      if (e.length == this.chatList.length) {
        this.$store.commit('SETALL', true)
      } else {
        this.$store.commit('SETALL', false)
      }
      console.log(e)
    },
  },
  scrollBottom() {
    this.$nextTick(() => {
      this.lastBottomId = 'last-msg-item'
      this.$nextTick(() => {
        this.lastBottomId = ''
      })
    })
  },
}
</script>

<style scoped lang="scss">
.chat-list {
  width: 100%;
  height: 94%;
  margin-top: 65rpx;
  padding-bottom: 150rpx;
  box-sizing: border-box;
  .list {
    display: flex;
    flex-direction: column;
    padding: 32rpx 32rpx 58rpx 32rpx;
    box-sizing: border-box;
  }
}
::v-deep .u-checkbox {
  position: absolute;
  left: -80rpx;
  top: 46rpx;
}
.checkbocCl {
  position: absolute;
  left: -80rpx;
  top: 46rpx;
}
</style>
